import { Container, Row, Col, Tab, Nav, TabContainer, TabContent, TabPane } from "react-bootstrap";
import pro1 from "../assets/img/pro1.png";
import pro2 from "../assets/img/pro2.png";
import pro3 from "../assets/img/pro3.png";
import pro4 from "../assets/img/pro4.png";
import pro5 from "../assets/img/pro5.png";
import pro6 from "../assets/img/pro6.png";
import pro7 from "../assets/img/pro7.png";
import pro8 from "../assets/img/pro8.png";
import pro9 from "../assets/img/pro9.png";
import pro10 from "../assets/img/pro10.png";
import pro11 from "../assets/img/pro11.png";
import pro12 from "../assets/img/pro12.png";
import pro13 from "../assets/img/pro13.png";
import pro14 from "../assets/img/pro14.png";
import pro15 from "../assets/img/pro15.png";






import colorSharp2 from "../assets/img/color-sharp2.png";
// 导入projectCard 组件
import { ProjectCard } from "./ProjcetCard";

export const Projects = () => {

    // 作品介绍
    const projects1 = [
        {
            title: "企业网站解决方案",
            description: "企业网站作为一个公司的网络名片，最主要的作用是展示公司形象和宣传公司的服务或产品，一个企业网站，关键...",
            imgUrl: pro1,
          },
          {
            title: "手机微信网站方案",
            description: "随着智能手机的迅速发展，移动互联网时代已经到来，这带给我们是一个机遇还是危机？全取决于...",
            imgUrl: pro2,
          },
          {
            title: "外贸商城独立站解决方案",
            description: "随着亚马逊对部分中国商家的封杀，搭建外贸独立站商城变得重要，通过建立自己的私域品牌商城，不被完全捆...",
            imgUrl: pro3,
          },
          {
            title: "响应式网站建设方案",
            description: "响应式网站最大的好处是一个网站可以自适应多个终端，如手机端、电脑端、平板端...",
            imgUrl: pro4,
          },
          {
            title: "集团网站搭建方案",
            description: "集团公司一般规模比较大，有很多分公司，业务范围广发，网站要体现大气、简洁，同时功能齐全。",
            imgUrl: pro5,
          },
          {
            title: "小程序定制开发",
            description: "微信小程序是微信退出的区别于企业订阅号，公众号的一种全新与用户链接的全新技术产品。无需注册、无需登录...",
            imgUrl: pro6,
          },
        
    ]
    const projects2 = [
        {
            title: "商城系统方案",
            description: "网上销售商品已经变的非常普遍，如果你是厂商或者经销商，经营自己的品牌网上商城...",
            imgUrl: pro7,
          },
          {
            title: "外贸网站方案",
            description: "外贸网站的面向用户主要为国外客户，所以除了文字采用英文外，风格设计、页面编码、操作习惯都要适应国外客户需求...",
            imgUrl: pro8,
          },
          {
            title: "服装网站设计方案",
            description: "风格上清新明快，符合最新审美观，制作精细，有积极开放的感觉；使用流行的大区块划分概念，配合使用大广告条，突出宣传...",
            imgUrl: pro9,
          },
          {
            title: "酒店网站定制方案",
            description: "在建设酒店网站时我们要充分考虑“酒店”的经营服务特色，因此我们在制作方案时会注重系统的实用性、可靠性、...",
            imgUrl: pro10,
          },
          {
            title: "教育培训网站解决方案",
            description: "我们开发的教育培训系统在教课程学行领域处在领先技术优势，给许多客户带了丰厚的盈利、扩大了市场的占有率，解决...",
            imgUrl: pro11,
          },
          {
            title: "大视频短视频网站开发方案",
            description: "随着网络速度的大幅提升，越来越多的人喜欢看视频，视频被网站使用的也越来越多，包括...",
            imgUrl: pro12,
          },
        
    ]
    const projects3 = [
        {
            title: "搜索引擎优化",
            description: "今天我们谈提高网站的价值，那么什么是网站的价值呢？很简单，网站的价值就是访客觉得有用，提高网站的价值，就是让更...",
            imgUrl: pro13,
          },
          {
            title: "门户网站搭建方案",
            description: "门户网站不是简单的内容管理，而是新闻内容的聚合，做好门户网站，需要管理好网站的内容，同时...",
            imgUrl: pro14,
          },
          {
            title: "旅游网站开发方案",
            description: "随着互联网的迅速发展，越多越多人，尤其是上班白领，都喜欢在网上查看旅游相关信息，然后再网上直接预定购买旅游行程...",
            imgUrl: pro15,
          },
          
        
    ]

    return (
        <section className="project" id="projects">
            <Container>
                <Row>
                    <Col size={12}>
                        <h2>Projects 方案</h2>
                        <p>
                            Web开发人员可以找到所有类型的企业，包括大型企业和政府部门，中小型企业，或者单独作为自由职业者的工作。根据各种就业性质、工作类型的不同，我们能够为各类行业提供什么网站搭建方案？这里提出的建设方案可供参考。
                        </p>
                        <Tab.Container id="projects-tabs" defaultActiveKey="first">
                        {/* 包裹在容器里 */}
                        <Nav variant="pills" className="nav-pills mb-5 justify-content-center align-items-center" id="pills-tab">
                    <Nav.Item>
                      <Nav.Link eventKey="first">Tab 1</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link eventKey="second">Tab 2</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link eventKey="third">Tab 3</Nav.Link>
                    </Nav.Item>
                  </Nav>
                  <Tab.Content id="slideInUp">
                    {/* 事件键 */}
                    <TabPane eventKey="first">
                        <Row>
                            {/* 映射对于每个项目和索引 */}
                            {
                                projects1.map((project,index) => {
                                    return(
                                        <ProjectCard 
                                        key={index}
                                        {...project}
                                        />
                                    )
                                })
                            }
                        </Row>
                    </TabPane>
                    <Tab.Pane eventKey="second">
                    <Row>
                            {/* 映射对于每个项目和索引 */}
                            {
                                projects2.map((project,index) => {
                                    return(
                                        <ProjectCard 
                                        key={index}
                                        {...project}
                                        />
                                    )
                                })
                            }
                        </Row>
                    </Tab.Pane>
                    <Tab.Pane eventKey="third">
                    <Row>
                            {/* 映射对于每个项目和索引 */}
                            {
                                projects3.map((project,index) => {
                                    return(
                                        <ProjectCard 
                                        key={index}
                                        {...project}
                                        />
                                    )
                                })
                            }
                        </Row>
                    </Tab.Pane>
                  </Tab.Content>
                  </Tab.Container>

                    </Col>
                </Row>
            </Container>
            <img className="background-image-right" src={colorSharp2}/>
        </section>
    )
}